<template>
  <div ref="myDiv" class="radar-echart" />
</template>

<script>
// 按需引入 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/radar')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  data() {
    return {

    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.myDiv)
      this.setOption()
    },
    setOption() {
      this.chart.setOption({
        tooltip: {

        },
        legend: {
          data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
        },
        radar: {
          name: {
            textStyle: {
              color: '#fff',
              backgroundColor: '#999',
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          indicator: [
            { name: '能力', max: 100 },
            { name: '管理', max: 100 },
            { name: '周边', max: 100 },
            { name: '贡献', max: 100 },
            { name: '态度', max: 100 }
          ]
        },
        series: [{
          name: '预算 vs 开销（Budget vs spending）',
          type: 'radar',
          // areaStyle: {normal: {}},
          data: [
            {
              value: [10, 20, 20, 80, 90, 100],
              name: '个人'
            },
            {
              value: [40, 60, 20, 60, 77, 56],
              name: '部门'
            },
            {
              value: [26, 77, 24, 55, 37, 85],
              name: '公司'
            }
          ]
        }]
      })
    }
  }
}
</script>

<style scoped>
.radar-echart {
  width: 600px;
  height: 400px;
}
</style>
